<template>
  <div class="task">
    <div class="header">
      逛社区得青币
    </div>
    <div class="list">
      <div v-for="(item, index) in list" :key="index" class="item">
        <div class="content">
          <div class="circle" />
          <div>
            <div class="title">
              {{ item.title }}({{ item.num }}/{{ item.times }})
            </div>
            <div class="desc">
              成功收获得
              <image src="/static/images/points/coin-small.png" class="img" />
              {{ item.text2 }}
            </div>
          </div>
        </div>
        <div v-if="item.active" class="status">进行中</div>
        <div v-else class="status">已完成</div>
      </div>
    </div>

    <!-- <div class="expand">展开全部攻略<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.5)" size="12" /></div> -->
  </div>
</template>

<script>
import {
  conforms
} from 'lodash-es'
import {
  getCurrentPageConfigByName
} from '@/utils'
export default {

  props: {
    reward_list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: []
    }
  },
  watch: {
    reward_list: {
      handler(list) {
        if (this.list && list && list.length) {
          this.list.forEach(item => {
            const obj = list.find(l => l.task_name == item.name)
            if (obj) {
              // 一次性奖励
              if (obj.reward_type == 1) {
                this.$set(item, 'num', obj.total_num || 0)
              }
              // 每日奖励
              if (obj.reward_type == 2) {
                this.$set(item, 'num', obj.today_num || 0)
              }

              this.$set(item, 'times', obj.times || 0)
              if (item.num >= item.times) {
                this.$set(item, 'active', false)
              } else {
                this.$set(item, 'active', true)
              }
            }
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    getCurrentPageConfigByName('逛社区得青币').then(res => {
      this.list = res.app_path_set_dt
      console.log('青丝手帐---逛社区得青币')
      console.log(res)
      if (this.list && this.reward_list && this.reward_list.length) {
        this.list.forEach(item => {
          const obj = this.reward_list.find(l => l.task_name == item.name)
          if (obj) {
            // 一次性奖励
            if (obj.reward_type == 1) {
              this.$set(item, 'num', obj.total_num || 0)
            }
            // 每日奖励
            if (obj.reward_type == 2) {
              this.$set(item, 'num', obj.today_num || 0)
            }

            this.$set(item, 'times', obj.times || 0)
            if (item.num >= item.times) {
              this.$set(item, 'active', false)
            } else {
              this.$set(item, 'active', true)
            }
          }
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
	.task {
		background: #fff;
		box-sizing: border-box;
		padding: 26rpx;
	}

	.header {
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		padding-bottom: 26rpx;
	}

	.list {
		.item {
			box-sizing: border-box;
			padding: 26rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2rpx solid #f2f2f2;
		}
	}

	.img {
		width: 39.6rpx;
		height: 39.6rpx;
		flex-shrink: 0;
	}

	.title {
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		position: relative;
	}

	.desc {
		font-weight: 400;
		font-size: 20rpx;
		color: #000000;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-top: 6rpx;
		@include flex-column-center;
	}

	.status {
		width: 138rpx;
		height: 44rpx;
		border-radius: 23rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.5);
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.5);
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.circle {
		width: 18rpx;
		height: 18rpx;
		background: #78FFE6;
		border-radius: 50%;
		margin-right: 8rpx;
		margin-top: 8rpx;
	}

	.content {
		display: flex;
	}

	.expand {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
	}
</style>
